<template>
    <div class="page full">
        <div class="top flex">
            <ElButton type="primary" @click="add">新增角色</ElButton>
            <div class="search-box flex">
                <el-input v-model="searchKey" placeholder="支持用户ID、用户名模糊搜索" class="my-input" @keyup.enter="search">
                    <template #append>
                        <ElButton @click="search">搜索</ElButton>
                    </template>
                </el-input>
                <ElButton @click="resetSearch">重置</ElButton>
            </div>
        </div>
        <div class="center">
            <List ref="list"></List>
        </div>
        <div class="bottom flex">
            <ElPagination v-model:current-page="pagination.current" v-model:page-size="pagination.size" background :total="pagination.total" @change="paginationChange"></ElPagination>
        </div>
        <RoleDialog ref="roleAddDialog" @complete="addComplete"></RoleDialog>
    </div>
</template>

<script setup lang="ts">
import RoleDialog from './RoleDialog.vue';
import List from './List.vue';

const roleAddDialog = ref<any>();
const list = ref<any>();
const searchKey = ref('');

const pagination = reactive({
    size: 10,
    current: 1,
    total: 0,
});

const add = () => {
    roleAddDialog.value?.open();
};

const getData = async (data?: any) => {
    const total = await list.value?.refresh(data);
    pagination.total = total || 0;
};

const search = async () => {
    getData({ searchKey: searchKey.value, current: 1 });
};

const resetSearch = () => {
    searchKey.value = '';
    getData({ searchKey: searchKey.value, current: 1 });
};

const addComplete = () => {
    getData({ current: 1 });
};

const paginationChange = (currentPage: number) => {
    getData({ current: currentPage });
};

onMounted(() => {
    getData();
});
</script>

<style scoped>
.top {
    height: 32px;
    justify-content: space-between;
    margin-bottom: 16px;
}
.search-box {
    height: 100%;
    gap: 12px;
}

.center {
    max-height: calc(100% - 96px);
}

.bottom {
    height: 32px;
    justify-content: end;
    margin-top: 16px;
}

.select-box {
    height: 100%;
    padding-left: 13px;
    align-items: center;
    gap: 12px;
}

.select-text {
    font-size: 14px;
    color: var(--el-text-color-regular);
}

.my-input {
    width: 320px;
}
</style>
